/*
  学习目标：
  1. 知道 Link 和 NavLink 组件的区别 - NavLink 会有高亮类名
  2. 知道如何自定义高亮类名 activeClassName
  3. 💥知道：模糊匹配 和 精准匹配(exact)
    模糊匹配： url路径  包含 to属性或path属性
    例如： url: /test/1  to: /test ,模糊匹配上就有高亮类名
    精准匹配 url路径与to属性或path属性  一模一样
*/
import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Link,
} from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          {/* 默认是模糊匹配，就会添加上高亮类名，高亮类名可以使用 activeClassName 设置 */}
          {/* 使用 exact 可以改变匹配规则，改成 精准匹配才添加类名 */}
          <NavLink to="/home" activeClassName="xxx-xx" exact>
            首页
          </NavLink>
          <br />
          <NavLink to="/my" activeClassName="xxx-xx" exact>
            我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend" activeClassName="xxx-xx" exact>
            发现
          </NavLink>
          <br />
          <Route path="/home" component={Home}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route>
        </Router>
      </div>
    );
  }
}

function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
